<template>
	<view class="pt40 pb40">
			<view class="flex alcenter space">
				<view class="flex alcenter">
					<image class="uni-toutiao-store-logo" :src="content.store.logo"></image>
					<view class="text-main ft16 ml20">{{content.store.name}}</view>
				</view>
				<view class="btn-gz flex center alcenter ft14 text-theme" v-if="content.store.isCollected">
					<text class="iconfont iconbtn_concern ft14"></text>
					<text class="ml10">关注</text>
				</view>
				<view class="btn-qxgz flex center alcenter ft14 text-info" v-else>取消关注</view>
			</view>
			<navigator url="/pages/toutiao/detail">
			<view class="mt30 text-over2">
				<text class="tag-new-ad mr10">{{content.type}}</text>
				<text class="ft20 ftw600 text-main">{{content.title}}</text>
			</view>
			<view class="mt30 mb30">
				<image class="toutiao-img bdr16" mode="aspectFill" :src="content.cover"></image>
			</view>
			</navigator>
			<view class="flex space alend">
				<view class="text-notice ft14">{{content.views}}浏览</view>
				<view class="flex alend">
					<view class="toutiao-act">
						<!-- <text class="iconfont iconbtn_zan text-default ft24"></text> -->
						<text class="iconfont iconbtn_zan1 text-theme ft24"></text>
						<text class="num ft12 text-info">{{content.likes}}</text>
					</view>
					<view class="toutiao-act">
						<text class="iconfont iconbtn_comment text-default ft24"></text>
						<text class="num ft12 text-info">{{content.comments}}</text>
					</view>
					<view class="toutiao-act">
						<text class="iconfont iconbtn_share text-default ft24"></text>
						<text class="num ft12 text-info">{{content.shares}}</text>
					</view>
				</view>
			</view>
		</view>
	
</template>

<script>
	export default{
		props:{
			content: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return {
				
			};
		}
	}
</script>

<style>
	
	.uni-toutiao-store-logo{
		width:80rpx;
		height:80rpx;
		box-shadow:0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
		border-radius:40rpx;
	}
	.toutiao-img{
		width: 100%;
		height: 388rpx;
	}
	.toutiao-act{
		position: relative;
		width: 140rpx;
	}
	.toutiao-act .num{
		position: absolute;
		left:50rpx;
		top:-10rpx;
	}
</style>
